<template>
	<view class="page">
		<u-gap height="30"></u-gap>
		<view class="box margin0 flex-between flex-wrap">
			<view class="boxLi" v-for="(item, index) in list" :key="index">
				<view class="videoVue relative">
					<image :src="item.url+'?x-oss-process=video/snapshot,t_1,f_jpg,w_330,m_fast,ar_auto'" style="width: 330rpx;" mode="aspectFill"></image>
					<image src="../../static/play.png" style="width: 70rpx; height: 70rpx;z-index: 99;" class="absolute-auto" @click="$tools.router('../play', item.url)"></image>
				</view>
				<view style="line-height: 80rpx; text-align: center; color: #000; background: #fff;">{{item.title}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				list: [],
			}
		},
		async onLoad() {
			await this.getList()
		},
		
		methods: {
			// 获取用户案例
			async getList(){
				const res = await this.$request("/shuziren/videoTutorial", {}, "GET")
				if(res.code===200) {
					this.list = res.data
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.box {
		width: 690rpx;
		.boxLi {
			width: 330rpx;
			height: 600rpx;
			background: #f5f5f5;
			border-radius: 12rpx;
			margin-bottom: 30rpx;
			.videoVue {
				width: 330rpx;
				height: 520rpx;
				border-radius: 12rpx 12rpx 0 0;
				overflow: hidden;
			}
		}
	}
</style>